<template>
  <div class="viewer-view">
    <el-card class="viewer-placeholder">
      <div class="placeholder-content">
        <div class="placeholder-icon">🔍</div>
        <h3 class="placeholder-title">数据查看器</h3>
        <p class="placeholder-description">
          这里将显示详细的数据查看界面，支持多平台数据切换、筛选和分析
        </p>
        <div class="placeholder-features">
          <div class="feature-item">
            <span class="feature-icon">🎯</span>
            <span>多平台数据切换</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">🔍</span>
            <span>智能搜索筛选</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">📊</span>
            <span>数据可视化分析</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">📤</span>
            <span>批量导出操作</span>
          </div>
        </div>
        <el-button type="primary" size="large" @click="openDataViewer">
          打开数据查看器
        </el-button>
      </div>
    </el-card>

    <!-- 快速预览 -->
    <el-card class="quick-preview">
      <template #header>
        <div class="section-title">
          👁️ 数据快速预览
        </div>
      </template>
      
      <div class="preview-tabs">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="🗣️ 知乎" name="zhihu">
            <div class="preview-content">
              <div class="preview-item">
                <div class="item-title">游戏资源分享大全</div>
                <div class="item-meta">张三 · 2025-08-03 · 👍 128 💬 45</div>
                <div class="item-content">分享一些最新的游戏资源，包含各种热门游戏的下载链接...</div>
              </div>
              <div class="preview-item">
                <div class="item-title">pan.quark.cn 使用教程</div>
                <div class="item-meta">李四 · 2025-08-02 · 👍 89 💬 23</div>
                <div class="item-content">详细介绍夸克网盘的使用方法，包括注册、上传、分享等功能...</div>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="🔴 小红书" name="xiaohongshu">
            <div class="preview-content">
              <div class="preview-item">
                <div class="item-title">最新游戏下载合集</div>
                <div class="item-meta">王五 · 2025-08-01 · 👍 156 💬 67</div>
                <div class="item-content">收集了最新最热门的游戏下载链接，包括单机游戏、网络游戏等...</div>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="🎵 抖音" name="douyin">
            <div class="preview-content">
              <div class="preview-item">
                <div class="item-title">游戏攻略分享</div>
                <div class="item-meta">赵六 · 2025-07-31 · 👍 67 💬 12</div>
                <div class="item-content">游戏攻略分享，新手必看指南...</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
const activeTab = ref('zhihu')

const openDataViewer = () => {
  // 这里可以打开独立的数据查看器窗口
  // 或者跳转到专门的数据查看页面
  ElMessage.success('正在打开数据查看器...')
  
  // 模拟打开新窗口
  setTimeout(() => {
    ElMessage.info('数据查看器功能正在开发中，敬请期待！')
  }, 1000)
}
</script>

<style scoped>
.viewer-view {
  max-width: 1200px;
  margin: 0 auto;
}

.viewer-placeholder {
  margin-bottom: 20px;
}

.placeholder-content {
  text-align: center;
  padding: 40px 20px;
}

.placeholder-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.placeholder-title {
  font-size: 24px;
  color: #303133;
  margin-bottom: 15px;
}

.placeholder-description {
  color: #606266;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.placeholder-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  font-size: 14px;
  color: #606266;
}

.feature-icon {
  font-size: 18px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-content {
  max-height: 400px;
  overflow-y: auto;
}

.preview-item {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}

.preview-item:hover {
  background: #f8f9fa;
}

.preview-item:last-child {
  border-bottom: none;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
  cursor: pointer;
}

.item-title:hover {
  color: var(--el-color-primary);
}

.item-meta {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.item-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>